<template>
	<view class="container" style="padding-bottom: 100rpx;">
		<view style="background-color: #FFF;width: 710rpx;margin-left:20rpx;border-radius: 12rpx;">
			<view v-for="(item, index) in orderModel.itemList" :key='index' @click="goItem(item)"
			style="display: flex;flex-direction: row;align-items: center;padding: 20rpx 0;margin-left: 16rpx;border-bottom: 0.6px solid #efefef;">
				<view style="display: flex;flex-direction: row;">
					<image :src="item.coverUrl" mode='aspectFill' style="width: 160rpx;height: 160rpx;"></image>
					<view style="margin-left: 16rpx;width: 510rpx;">
						<view style="font-size: 28rpx;" class='limitLineNumOfTwo'>{{item.itemName}}</view>
						<view style="font-size: 28rpx;margin-top: 8rpx;color: #999;" class='limitLineNumOfOne'>{{getSpecs(item.specValues)}}</view>
						<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-top: 16rpx;margin-right: 16rpx">
							<view style="font-size: 30rpx;">¥{{item.price}}</view>
							共{{item.payCount}}件
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="background-color: #FFF;width: 678rpx;margin-left:20rpx;margin-top: 16rpx;border-radius: 12rpx;padding: 20rpx 16rpx;">
			<div>
				<text style="color: #999;">订单编号：</text><text style="margin-left: 30rpx;">{{orderModel.orderId}}</text>
				<text style="margin-left: 16rpx;background-color: #eee;padding: 4rpx 8rpx;font-size: 24rpx;" @click="copy(orderModel.orderId)">复制</text>
			</div>
			<div style='margin-top: 24rpx;'>
				<text style="color: #999;">下单时间：</text><text style="margin-left: 30rpx;">{{$time.dateFormat('yyyy-mm-dd HH:MM:SS', orderModel.createTime)}}</text>
			</div>
			<div style='margin-top: 24rpx;'>
				<text style="color: #999;">支付方式：</text><text style="margin-left: 30rpx;">{{optionDict['payway'][orderModel.payway] || '无'}}</text>
			</div>
			<div style='margin-top: 24rpx;'>
				<text style="color: #999;">实付时间：</text><text style="margin-left: 30rpx;">{{$time.dateFormat('yyyy-mm-dd HH:MM:SS', orderModel.payTime)}}</text>
			</div>
		</view>
		<view style="background-color: #FFF;width: 678rpx;margin-left:20rpx;margin-top: 16rpx;border-radius: 12rpx;padding: 20rpx 16rpx;">
			<div style='font-size: 30rpx;color: #000;font-weight: bold;'>配送信息</div>
			<div style='margin-top: 24rpx;'>
				<text style="color: #999;">配送方式：</text><text style="margin-left: 30rpx;">{{optionDict['sendType'][orderModel.sendType]}}</text>
			</div>
			<div style='margin-top: 24rpx;display: flex;flex-direction: row;align-items: flex-start;'>
				<text style="color: #999;">收货地址：</text>
				<view v-if="orderModel.addrinfo" style="display: flex;flex-direction: column;">
					<text style="margin-left: 30rpx;">{{orderModel.addrinfo.contactName}}{{orderModel.addrinfo.contactPhone}}</text>
					<text style="margin-left: 30rpx;">{{orderModel.addrinfo.addrInfo}}</text>
				</view>
			</div>
		</view>
		<view style="background-color: #FFF;width: 678rpx;margin-left:20rpx;margin-top: 16rpx;border-radius: 12rpx;padding: 20rpx 16rpx;">
			<div style='display: flex;flex-direction: row;justify-content: space-between;'>
				<text style="color: #999;">商品总额：</text><text style="margin-left: 30rpx;">¥{{orderModel.realPay}}</text>
			</div>
			<div style='margin-top: 24rpx;display: flex;flex-direction: row;justify-content: space-between;'>
				<text style="color: #999;">商品优惠：</text><text style="margin-left: 30rpx;">- ¥0</text>
			</div>
			<div style='margin-top: 24rpx;text-align: right;'>
				<text style="color: #999;">实付款：</text><text style="margin-left: 30rpx;color: #DD4949;">¥{{orderModel.realPay}}</text>
			</div>
		</view>
		<!-- <goods-nav-bar >
			<view v-if="orderModel.orderStatus == 'WAIT_PAY'" slot="button" style="width: 200rpx;margin-right: 20rpx;">
				<u-button @click='cancelPay' type="info" :plain="true">取消支付</u-button>
			</view>
			<view v-if="orderModel.orderStatus == 'WAIT_PAY'" slot="button" style="width: 200rpx;margin-right: 20rpx;">
				<u-button @click='goPay' type="error" :plain="true">立即支付</u-button>
			</view>
			<view v-if="orderModel.orderStatus == 'WAIT_SEND'" slot="button" style="width: 160rpx;margin-right: 20rpx;">
				<u-button type="info" :plain="true" text="取消订单" @click='cancelOrder'></u-button>
			</view>
		</goods-nav-bar> -->
	</view>
</template>

<script>
	import {common} from '@/api/common.js'
	import { order } from '@/api/order.js'
	import { interfaceApi } from '@/api/interface.js'
	import goodsNavBar from '@/components/goodsNavBar/goodsNavBar.vue'
	import {wxminiproOrderIdPay} from '@/common/utils/wxminiproPay.js'
	export default{
		components: {goodsNavBar},
		data() {
			return {
				orderId: '',
				orderModel: {},
				optionDict: {}
			}
		},
		onLoad() {
			this.orderId = this.$Route.query.orderId
		},
		onShow() {
			this.getOrderInfoByOrderId()
			
		},
		methods:{
			getOrderInfoByOrderId() {
				order.getOrderInfoByOrderId({
					orderId: this.orderId
				}).then(res => {
					if (res.data.code == 10000) {
						this.orderModel = res.data.data
						this.getFieldListOptionByTableKey()
					}
				})
			},
			getSpecs(specValues) {
				if(!specValues) return ''
				//将选中的spec以,隔开
				var specs_sel = ''
				for(var item of JSON.parse(specValues)){
					specs_sel = specs_sel + item.name + '，'
				}
				specs_sel = specs_sel.substring(0, specs_sel.length-1)
				return specs_sel
			},
			copy(content){
				uni.setClipboardData({
					data: content,
					success: function() {
						uni.showToast({
							icon: "none",
							title: "复制成功",
						});
					},
				});
			},
			getFieldListOptionByTableKey(){
				interfaceApi.getFieldListOptionByTableKey({
					tableKey: 'pay_order'
				}).then(res => {
					uni.stopPullDownRefresh();
					if(res.data.code == 10000){
						this.optionDict = res.data.data
						var orderStatus = this.optionDict['orderStatus'][this.orderModel.orderStatus]
						uni.setNavigationBarTitle({
							title: orderStatus
						})
					}
				})
			},
			goItem(item){
				this.$Router.push({
					name: 'itemDetailForStock',
					params: {
						itemId: item.item
					}
				})
			},
			//去支付
			goPay(){
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				var params = {
					orderId: this.orderModel.orderId
				}
				var _this = this
				wxminiproOrderIdPay(params).then(res => {
					uni.hideLoading()
					uni.showModal({
						content: '支付成功',
						confirmText: '确定',
						showCancel: false,
						complete(_res) {
							if(_res.confirm){
								uni.reLaunch({
									url: '/pages/home/home'
								})
							}
						}
					})
				})
			},
			// 取消支付
			cancelPay(){
				var _this = this
				uni.showModal({
					title: '是否确认取消',
					confirmText: '确认',
					cancelText: '取消',
					success(res) {
						if(res.confirm){
							common.operateActionPost('/pay/order/cancelPay/', {
								orderId: _this.orderModel.orderId
							}).then(res => {
								if(res.data.code == 10000){
									uni.showToast({
										title: '取消成功',
										icon:'none'
									})
									_this.getOrderInfoByOrderId()
								}
							})
						}
					}
				})
			},
			//取消订单
			cancelOrder(){
				var _this = this
				uni.showModal({
					title: '是否确认取消',
					content: '取消后钱款将退回至您的付款账户中',
					confirmText: '确认',
					cancelText: '取消',
					success(res) {
						if(res.confirm){
							common.operateActionPost('/pay/order/cancelOrder/', {
								orderId: _this.orderModel.orderId
							}).then(res => {
								if(res.data.code == 10000){
									uni.showToast({
										title: '取消成功',
										icon:'none'
									})
									_this.getOrderInfoByOrderId()
								}
							})
						}
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	
</style>
